<template>
  <div class='page orderpage container'>
    <van-nav-bar :title='$t("m.header.myOrder")' left-arrow @click-left='onBack'>
      <van-icon slot='right' :class='{ editing: showEdit }' :info='editText' @click='onEdit' />
    </van-nav-bar>
    <van-tabs v-model='active' animated swipeable @click='onBar' @change='onBar'>
      <van-tab v-for='(item, index) in orderTab' :key='index' :title='item.name'>
        <div v-for='(itemPay, itemIndex) in orders' :key='itemIndex' class='order_item' @click='onOrderDetail(itemPay)'>
          <div>
            <div class='order-top flex-space'>
              <p class='order_num'>
                {{ $t('m.order.orderNum') }}:{{ itemPay._id }}
              </p>
              <van-tag :type='itemPay.color'>
                {{ translateStatus(itemPay.status) }}
              </van-tag>
            </div>
            <div class='order-content flex-space'>
              <div class='flex'>
                <div v-for='(itemProduct, indexProduct) in itemPay.products' :key='indexProduct' class='flex'>
                  <img class='order-img' :src='itemProduct.imgCover'>
                </div>
              </div>
              <van-icon v-show='showEdit' class='remove' name='delete' color='#f44' @click.stop='onRemove(itemPay._id, itemIndex)' />
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { apiGetOrder, apiDeleteOrder } from '@/api/order.js'
import { NavBar, Tab, Tabs, Toast, Icon, Tag, Dialog } from 'vant'
import { dataMixin } from '@/mixins/dataMixin.js'
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  metaInfo () {
    return {
      title: this.$t('m.meta.order.title'),
      meta: [
        {
          name: this.$t('m.meta.order.name'),
          content: this.$t('m.meta.order.content'),
        },
      ],
    }
  },
  data () {
    return {
      havePage: false,
      orderData: [],
      type: 'paying',
      active: 0,
      orderTab: [{ name: this.$t('m.order.paying') }, { name: this.$t('m.order.waitPack') }, { name: this.$t('m.order.done') }, { name: this.$t('m.order.all') }],
      title: '',
      showEdit: false,
      editText: '编辑',
    }
  },
  mixins: [dataMixin],
  components: {
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Toast.name]: Toast,
    [Icon.name]: Icon,
    [Tag.name]: Tag,
    [Dialog.name]: Dialog,
  },
  computed: {
    ...mapState(['orderStatus', 'orders']),
  },
  created () {
    switch (this.orderStatus) {
      case 'paying':
        this.active = 0
        this.type = 'paying'
        break
      case 'payed':
        this.active = 1
        this.type = 'payed'
        break
      case 'done':
        this.active = 2
        this.type = 'done'
        break
      case '':
        this.active = 3
        this.type = ''
        break
    }
  },
  mounted () {
    this.getOrder()
  },
  methods: {
    ...mapActions(['getOrderList', 'setData']),
    ...mapMutations({
      setOrderDetail: 'SET_ORDER_DETAIL',
      setOrderStatus: 'SET_ORDER_STATUS',
    }),
    onOrderDetail (item) {
      this.setOrderDetail(item)
      this.$router.push({
        path: 'orderwait',
        query: {
          status: item.status,
          id: item._id,
        },
      })
    },
    onRemove (id, index) {
      Dialog.confirm({
        message: this.$t('m.message.deleteSure'),
      }).then(() => {
        this.sureRemove(id, index)
      })
    },
    async sureRemove (id, index) {
      await apiDeleteOrder(id)
      this.orders.splice(index, 1)
      this.setData({
        orders: this.orders,
      })
    },
    getOrder () {
      this.getOrderList({
        type: this.type,
        This: this,
      })
    },
    onBar (index, title) {
      console.log('title', title)
      switch (title) {
        case '待付款':
          this.type = 'paying'
          this.setOrderStatus(this.type)
          break
        case '待收货':
          this.type = 'payed'
          this.setOrderStatus(this.type)
          break
        case '已完成':
          this.type = 'done'
          this.setOrderStatus(this.type)
          break
        case '全部':
          this.type = ''
          this.setOrderStatus(this.type)
          break
      }
      this.getOrder()
    },
    onEdit () {
      this.showEdit = !this.showEdit
      if (this.showEdit) {
        this.editText = '完成'
      } else {
        this.editText = '编辑'
      }
    },
    translateStatus (val) {
      switch (val) {
        case 'payed':
          return this.$t('m.order.payed')
        case 'paying':
          return this.$t('m.order.paying')
        case 'done':
          return this.$t('m.order.done')
        case 'waitPack':
          return this.$t('m.order.waitPack')
      }
    },
  },
}
</script>

<style lang='scss' scoped>
.orderpage {
  :global(.van-tabs__content--animated) {
    min-height: calc(100vh - 90px);
  }
  :global(.van-tab__pane) {
    padding: 9px 10px;
  }
  :global(.order_item) {
    border-radius: 8px;
    border: 1px solid #f0f0f0;
  }
}
:global(.van-info) {
  background-color: #fff;
  color: #7d7e80;
  cursor: pointer;
  width: 60px;
  font-size: 16px;
  right: 15px;
  top: -12px;
  line-height: 1.4;
}
:global(.van-icon.editing) {
  .van-info {
    color: #fa0e25;
  }
}
.order_item {
  border-bottom: 1px solid #ccc;
  height: 100px;
  padding-top: 10px;
  background: white;
  box-sizing: content-box;
}

.order-top {
  font-size: 14px;
  line-height: 20px;
  padding: 0 10px;
}
.order-content {
  padding: 0 10px;
}
.order-img {
  width: 60px;
  height: 60px;
  margin-right: 20px;
}
.van-tabs__track {
  text-align: center;
  margin: 0 auto;
}
.van-tabs--line {
  width: 100%;
}
.order_num {
  flex: 1;
}
</style>
